<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>平台公告</el-breadcrumb-item>
            <el-breadcrumb-item>2021年</el-breadcrumb-item>
            <el-breadcrumb-item>12月</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="cms-list-item" v-for="item in items" :key="item.title">
            <div class="title">{{ item.title }}</div>
            <div class="desc">{{ item.time }}</div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            items: [
                { title: "【产品】有赞云老版本有容器 Java 应用框架升级", time: "2022-03-30 16:46:38" },
                { title: "【公告】有赞云开放能力更新（20211206）", time: "2022-03-16 10:16:49" },

            ]
        }
    }

}
</script>

<style lang="less" scoped>
/deep/.el-breadcrumb {
    margin-bottom: 20px;
}

.cms-list-item {
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 72px;
    margin-bottom: 16px;
    border-bottom: 1px solid #ebedf0;

    .title {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        color: #323233;
        font-weight: 700;
        font-size: 16px;

    }

    .desc {
        color: #999;
        font-size: 14px;
        line-height: 18px;
    }
}
</style>